<template>
    <div class="b-card-box">
        <div class="crad-top-title">
            <div class="title">{{ title }}</div>
            <div class="top-right">
                <slot name="title"></slot>
            </div>
        </div>
        <div class="crad-content">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
/**
 * 定义组件的props选项，用于接收外部传递给组件的属性。
 * 
 * @param {Object} title - 组件的标题。类型为字符串，如果没有提供，默认为空字符串。
 *                         这个属性允许外部通过传递不同的标题来定制组件的显示。
 */
defineProps({
    title: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang='scss'>
.b-card-box {
    background: $b-bg-white;
    border-radius: $b-border-radius-10;

    .crad-top-title {
        height: 45px;
        line-height: 45px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;

        .top-right {
            font-size: 12px;
            color: #999;

        }

        .title {
            font-size: 16px;
            font-weight: 600;
        }
    }

    .crad-content {
        padding: 10px 17px;
    }
}
</style>
